<template>
	<view class="order-info-wrap">
		<view class="order-info">
			<view class="order-con">
				<view class="order-item line-v-center">
					<label>商品金额</label>
					<view class="right">¥{{pageType == 0 ? orderInfo.orderPayPrice : orderInfo.total_price}}
					</view>
				</view>
				<view class="order-item line-v-center">
					<label>商品数量</label>
					<view class="right" v-if='pageType == 0'>{{orderInfo.styles_num}}款，共{{orderInfo.orderTotalNum}}件</view>
					<view class="right" v-if='pageType == 1'>{{orderInfo.order_total_num}}件</view>
					<view class="right" v-if='pageType == 2'>{{orderInfo.pick_nums}}件</view>
				</view>
				<view class="order-item line-v-center" v-if='pageType == 0'>
					<label>优惠券</label>
					<view class="coupon-right">
						<view class="coupon-name" >
							<view class="coupon-name-con ellipsis" v-if='orderInfo.couponId > 0'>
								{{orderInfo.couponInfo.name}}
							</view>
						</view>
						<view class="select-coupon" @tap='selectCoupon'>
							<text v-if='orderInfo.couponId == 0'>{{orderInfo.couponNum}}张可用</text>
							<text v-else>-{{orderInfo.couponInfo.reduce_price}}</text>
							<uni-icons type='right' color='#333' size="16"></uni-icons>
						</view>
					</view>
				</view>
				<view class="order-item line-v-center" v-if='pageType == 1 && orderInfo.coupon_id > 0'>
					<label>优惠金额</label>
					<view class="coupon-right">
						<view class="coupon-name"></view>
						<view class="select-coupon">
							<text>￥{{orderInfo.coupon_money}}</text>
						</view>
					</view>
				</view>
				<view class="order-item line-v-center br">
					<label>运费</label>
					<view class="fee">¥{{orderInfo.express_price || orderInfo.expressPrice}}</view>
				</view>
			</view>
			<view class="total">实付合计：<text
					class="fee">¥{{pageType == 0 ? orderInfo.orderPayPrice : orderInfo.order_pay_price}}</text></view>
		</view>
		<view class="order-info" v-if='pageType == 1'>
			<view class="order-con">
				<view class="order-item line-v-center">
					<label>订单编号</label>
					<view class="right line-v-center">
						<view class="order-no">{{orderInfo.order_no}}</view>
						<view class="copy" @tap="copy(orderInfo.order_no)">复制</view>
					</view>
				</view>
				<view class="order-item line-v-center">
					<label>下单时间</label>
					<view class="right">{{orderInfo.create_time}}</view>
				</view>
				<view class="order-item line-v-center">
					<label>付款时间</label>
					<view class="right">{{orderInfo.pay_time}}</view>
				</view>
				<view class="order-item line-v-center" v-if='orderInfo.delivery_time'>
					<label>发货时间</label>
					<view class="right">{{orderInfo.delivery_time}}</view>
				</view>
				<!-- <view class="order-item order-item-remark order-item2" v-if='orderInfo.order_status == 2'>
					<label>审核说明</label>
					<view class="right">{{orderInfo.apply_refuse_reason}}</view>
				</view> -->
			</view>
		</view>
		<view class="order-info" v-if='pageType == 2'>
			<view class="order-con" v-if='orderInfo.driver'>
				<view class="order-item line-v-center order-item1">
					<label>配送员</label>
					<view class="right line-v-center">{{orderInfo.driver.contact}}
						<view class="phone" @tap='makeCall'>{{orderInfo.driver.phone}}</view>
					</view>
				</view>
				<view class="order-item line-v-center order-item2" v-if='orderInfo.status == 20'>
					<view class="map-wrap">
						<!-- :scale="11" -->
						<map id='myMap' :scale="11" class="map-con" :markers="orderInfo.markers" show-location
							:longitude="orderInfo.location.longitude" :latitude="orderInfo.location.latitude"></map>
					</view>
				</view>
			</view>
			<view class="order-con" v-else>
				<view class="order-item line-v-center">
					<label style="opacity: 0;">ceshi</label>
					<view class="right phone line-v-center">您的单子正在加急指派中哦~~</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "order-info",
		props: {
			pageType: {
				type: Number,
				default: 0, //0 --- 提交订单页  1 --- 订单详情页 2 -- 包裹详情
			},
			orderDetail: Object
		},
		watch:{
			orderDetail: {
				immediate: true,
				handler(newV) {
					this.orderInfo = newV;
					console.log('orderInfo', this.orderInfo)
				},
			},
		},
		data() {
			return {
				orderInfo:{}
			};
		},
		mounted() {
			/* // 获取地图实例
			let MapContext = wx.createMapContext('myMap');
			let markers = this.orderDetail.markers;
			console.log('markers',markers[0].latitude)
			// 换成具体的坐标点
			const points = [
				{
					longitude:markers[0].longitude,
					latitude:markers[0].latitude
				}, 
				{
					longitude:markers[1].longitude,
					latitude:markers[1].latitude
				}, 
				{
					longitude:markers[2].longitude,
					latitude:markers[2].latitude
				}, 
			];
			MapContext.includePoints({
				points: points,
				// 缩放视野展示所有经纬度 [上,右,下,左]  
				padding: [200, 200, 200, 200],
			}); */

		},
		methods: {
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetail.driver.phone
				})
			},
			selectCoupon(){
				this.$emit('selectCoupon')
			},
			copy(no){
				uni.setClipboardData({
					data:no,
					success() {
						uni.showToast({
							title:'复制成功',
							icon:'success'
						})
					},
					fail() {
						uni.showToast({
							title:'复制失败',
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-info {
		margin: 24rpx 24rpx 0;
		padding: 36rpx 24rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.order-item {
		padding-bottom: 28rpx;
		justify-content: space-between;
		label{
			padding-right: 14rpx;
			flex-shrink: 0;
		}
	}
	.order-item-remark{
		display: flex;
	}
	.coupon-right{
		flex:1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.coupon-name{
			color:#AFB0B2;
			font-size: 24rpx;
			width: 318rpx;
			.coupon-name-con{
				width: 100%;
			}
		}
		.select-coupon{
			display: flex;
			text{
				color:#FF5040;
				padding-right: 10rpx;
			}
		}
	}
	
	.br {
		border-bottom: 1rpx solid #eee;
	}

	.fee {
		color: #FF5040
	}

	.total {
		padding-top: 28rpx;
		text-align: right;
	}

	.right {
		color: #BBBBBB;
	}

	.copy {
		color: $supplier-main-color;
		margin-left: 10rpx;
	}

	.order-item2 {
		padding-bottom: 0;
	}
	.order-item1{
		padding-bottom: 0;
	}

	.phone {
		padding-left: 10rpx;
		color: #0D86FF;
	}

	.map-wrap {
		width: 100%;
		height: 328rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.map-con {
		width: 100%;
		height: 100%;
	}
</style>